<template>
  <h3>mutations</h3>
  <div>
    count: {{ count }} - <button @click="add(5)">btn</button> -
    <button @click="add(10)">btn</button>
  </div>
  <div>age: {{ age }} - <button @click="addage">age++</button></div>
</template>

<script>
// mapMutations将仓库的mutations的函数映射到methods里面
import { mapState, mapMutations } from "vuex";
import { INCREMENT2 } from "@/store/mutations_type.js";

export default {
  computed: mapState(["count", "age"]),
  methods: {
    add(n) {
      // 如何去触发仓库的mutations的函数
      // this.$store.commit("increment2", { num: n });
      // 等价于下面的对象风格的提交方式
      // this.$store.commit({
      //   // type: "increment2",
      //   type: INCREMENT2,
      //   num: n,
      // });

      this.increment2({ num: n });
    },
    // ageadd() {
    //   // this.$store.commit("addage");
    //   this.addage();
    // },
    // 将仓库的addage函数映射到了组件的methods里面，变成了methods里面有addage函数
    ...mapMutations(["addage", INCREMENT2]),
  },
};
</script>
